<template>
    <div class="addproductCategory-wrap">
        <el-button type="primary" @click="show" size="small">{{$t('m.button.newProductCategory')}}</el-button>
        <el-dialog
            :title="$t('m.button.newProductCategory')"
            :visible.sync="dialogFormVisible"
            width="400px"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item :label="$t('m.label.ownBu')" prop="businessUnitId">
                    <BU :form="ruleForm" formId="businessUnitId" addSize="mini" size="small"></BU>
                </el-form-item>
                <el-form-item :label="$t('m.label.categoryName')" prop="categoryName">
                    <el-input v-model="ruleForm.categoryName" autocomplete="off" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="addproductCategory('ruleForm')"
                    size="small"
                    :disabled="loading"
                    :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                >{{$t('m.button.confirm')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { BU } from "components/searchfor";
const ERR_OK = 200;
export default {
    data() {
        return {
            ruleForm: {
                businessUnitId: "",
                categoryName: ""
            },
            AllBU: [],
            dialogFormVisible: false,
            loading: false,
            rules: {
                categoryName: [
                    {
                        required: true,
                        message: this.$t(
                            "m.placeholder.pleaseEnteCategoryName"
                        ),
                        trigger: "blur"
                    }
                ],
                businessUnitId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectBu"),
                        trigger: "change"
                    }
                ]
            }
        };
    },
    methods: {
        show() {
            this.dialogFormVisible = true;
        },
        addproductCategory(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$ajax
                        .get(
                            this.GLOBAL.productService +
                                "/productCategory/add?buId=" +
                                this.ruleForm.businessUnitId +
                                "&categoryName=" +
                                this.ruleForm.categoryName
                        )
                        .then(res => {
                            if (res.data.code === ERR_OK) {
                                this.dialogFormVisible = false;
                                this.$message.success(res.data.msg);
                                this.$refs[formName].resetFields();
                                this.$parent.loadForm = false;
                                this.$nextTick(() => {
                                    this.$parent.loadForm = true;
                                });
                            } else {
                                this.$message.error(res.data.msg);
                            }
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        }
    },
    components: {
        BU
    }
};
</script>

<style lang="stylus" scoped>
.addproductCategory-wrap {
    display: inline-block;

    .el-form-item {
        margin-bottom: 15px;
        width: 280px;
    }
}
</style>
